body{
    background-color: #f5f5f5;
}
.container{
    background-color: rgb(196, 223, 292);
    max-width: 800px;
    margin: 150px auto;
    border: 5px solid rgb(0, 181, 203);
    height: 400px;
    padding: 20px;
    /* 
        flex    弹性
        direction   方向 
        column  垂直
        warn    弯曲
        justify 对齐
        space   空格
        between 在...和...之间
        around  围绕
        stretch 拉长

    display: flex; 横向排列         正向水平排列

    子项目的排列方向：
    flex-direction: row             正向水平排列
    flex-direction: column         正向垂直排列，默认
    flex-direction: row-reverse     逆向水平排列,配合dispaly:flex  使用生效;
    flex-direction: column-reverse  逆向垂直排列，配合display:flex 使用生效；
    
    子项目多行排列：
    flex-warp:wrap                  多行显示
    flex-warp:wrap-reverse          逆向多行显示

    上面的内容写在一条命令上:
    flex-flow:row wrap              水平多行显示，自由组合

    同行元素分布：左右对齐
    justify-content: centent        项目居中对齐
    justify-content: space-between  首位元素放置于起点与终点，其余平均放置
    justify-content: space-around   元素均匀分配

    对齐方式    上下对齐
    align-items:center              水平居中对齐
    align-items:stretch             拉长，使用时需不固定项目高度
    align-items:flex-start          顶部对齐
    align-items:flex-end            底部对齐
    align-items:baseline            顶部居中对齐
    */

    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.item{
    background-color: rgb(0, 181, 203);
    color: rgb(255, 255, 255);
    width: 100px;
    height: 100px;
    margin: 2px;
    font-weight: bold;
    font-size: 5em;
    text-align: center;
}
.item3{
    font-size: 3em;
}